<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的列表组</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./vue.min.js"></script>
</head>
<body>

    
    <div class="container" id="app">
        <h1>任务列表</h1>
        <p>
             添加任务  <input type="text" v-model="todo" @keydown.enter="add" placeholder="请点击enter添加任务" name="" id="">
            
            <button @click="finish">已完成任务</button>
        </p>
        <ul class="list-group" v-for="(item,index) in list">
            <li class="list-group-item">
                <input type="checkbox" :checked="item.done" name="" id="" @click="change(index)">
                {{item.value}}
            </li>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            todo: "",
            list: [{
                value: "吃饭",
                done: true
            }, {
                value: "睡觉",
                done: false

            } ,{
                value: "打豆豆",
                done: false

            }]
        },
        methods: {
            // 添加任务
            add(){
                if(this.todo=="") return ;
                this.list.push({
                    value:this.todo,
                    done:false
                })
                this.todo = "";
            },
            //已完成任务
            finish(){
                // let list =  this.list.filter(item=>{
                //     if(item.done){
                //         return item;
                //     }
                // })
                // console.log(list);

                let list = [];
                this.list.forEach(item => {
                    if(item.done){
                        list.push(item);
                    }
                });
                // console.log(list);
                this.list = list;

            },
            // 改变每个的状态
            change(index){
                this.list[index].done = !this.list[index].done;
            }
        },
    })
</script>
</html>